import React from 'react'
import {Link} from 'react-router-dom';
import {Menu, Icon} from 'antd';
import { connect } from "react-redux"
const menus =global.menus;
//此组件的意义就是将数据抽离出来，通过传递数据去渲染
class CustomMenu extends React.Component {
	state = {
		current: '/mainPage',
	  };
	handleClick = (e) => {
		console.log('click ', e);
		this.setState({
			current: e.key,
		});
	
	}
	renderSubMenu = ({key, icon, title, subs}) => {
		return (
			<Menu.SubMenu key={key} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
				{
					subs && subs.map(item => {
						return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
					})
				}
			</Menu.SubMenu>
		)
	}
	renderMenuItem = ({key, icon, title,}) => {
		return (
			<Menu.Item key={key}>
				<Link to={key}>
					{icon && <Icon type={icon}/>}
					<span>{title}</span>
				</Link>
			</Menu.Item>
		)
	}
	render() {
		console.log(menus)
		const { menuName } = this.props;
		console.log(menuName)
		return (
			<>
				<Menu
				onClick={this.handleClick}
				selectedKeys={[this.state.current]}
				mode="inline"
				theme="light"
			>
				{/* {
					menus.map(item => {
						return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
					})
				} */}
				{
					menus.map(item => {
						return item.type===menuName? this.renderMenuItem(item):''
					})
				} 
			</Menu>
			</>
		)
	}
}

const mapStateToProps = (state) => {
	console.log(state)
	return {
		menuName:state.user.menuType
	}
};
export default connect(mapStateToProps)(CustomMenu);
